<template>
  <div class="annual-maintenance-schedule-style">
    <div class="component-inner-div">
      <!-- 四角样式 -->
      <div class="the-four-border the-four-border-01" />
      <div class="the-four-border the-four-border-02" />
      <div class="the-four-border the-four-border-03" />
      <div class="the-four-border the-four-border-04" />
      <!-- 四角样式 -->

      <!-- 标题栏 -->
      <div class="title">
        <div class="point-icon" />
        <span>年度维修进度</span>
      </div>
      <!-- 标题栏 -->

      <el-carousel height="225px" indicator-position="outside">
        <el-carousel-item>
          <!-- 年度维修进度图表01 -->
          <div
            id="ColumnChart01"
            class="echart01"
          />
          <!-- 年度维修进度图表01 -->
        </el-carousel-item>
        <el-carousel-item>
          <!-- 年度维修进度图表01 -->
          <div
            id="ColumnChart02"
            class="echart01"
          />
          <!-- 年度维修进度图表01 -->
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import { ColumnChart01 } from './common/js/EchatsModel';

// 引入echarts
const echarts = require('echarts');

export default {
  data() {
    return {

    };
  },
  mounted() {
    this.getColumnChart01(); // 加载年度维修进度Echarts图表
  },
  methods: {
    // 加载年度维修进度Echarts图表
    getColumnChart01() {
      const dataset = {
        source: [
          ['怀化供电段', '变电', '接触网'],
          ['长沙供电段', 43.3, 85.8],
          ['衡阳供电段', 83.1, 73.4],
          ['广州供电段', 86.4, 65.2]
        ]
      };
      const myChart = echarts.init(document.getElementById('ColumnChart01'));
      ColumnChart01(myChart, dataset); // 年度维修进度 - 柱状图
      const myChart1 = echarts.init(document.getElementById('ColumnChart02'));
      ColumnChart01(myChart1, dataset); // 年度维修进度 - 柱状图
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-carousel__button {
	width: 39px;
	height: 8px;
	background-color: #fcd545;
	border-radius: 4px;
}

.annual-maintenance-schedule-style {
  color: white;
  width: 470px;
  height: 309px;
  box-sizing: border-box;
  .component-inner-div {
    border: 2px solid #122a57;
    height: 100%;
    background-color: rgba($color: #0b1945, $alpha: 0.8);
    box-sizing: border-box;
    .title {
      font-size: 20px;
      padding: 0;
      margin-top: 23px;
      align-items: center;
      display: flex;
      .point-icon {
        background-color: white;
        height: 10px;
        width: 10px;
        margin: 0 10px 0 17px;
      }
    }
    .echart01 {
      width: 436px;
      height: 217px;
      margin: 0 auto;
    }
  }
}
</style>
